<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--区级别的事项查询   杨卓霖-->
<head>
    <meta charset="UTF-8">
    <title>区级事项查询</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="myconfig/layui/css/layui.css" media="all">
    <!-- 加载js文件-->
    <script type="text/javascript" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="myconfig/layui/layui.js"></script>
    <style>
        #demoTable{
            text-align: center;
            margin: 0 auto;
        }
    </style>

</head>
  <body>

  <div class="demoTable" id="demoTable">
      <h1>区级事项管理</h1>
      <div class="layui-inline">
          事项状态:
          <div class="layui-form">
              <select name="sx_status" lay-verify="" id="sx_status">
                  <option value="">请选择...</option>

              </select>
          </div>
          <div style="height: 20px">

          </div>
          立项人:
          <div class="layui-form">
              <select name="sx_founder_id" lay-verify="" id="founder">
                  <option value="">请选择...</option>
              </select>
          </div>
          <div style="height: 20px">

          </div>
          紧急程度:
          <div class="layui-form">
              <select name="urgenry_id" lay-verify="" id="sx_urgenry">
                  <option value="">请选择...</option>
              </select>
          </div>
          <button class="layui-btn" data-type="reload">搜索</button>
      </div>
  </div>

  <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

  <script th:inline="none">
      layui.use('table', function(){
          var table = layui.table;
          //方法级渲染
          table.render({
              elem: '#LAY_table_user'
              ,url: 'sx/query'
              ,cols: [[
                  {checkbox: true, fixed: true},
                  {field:'itemId', title: 'ID',  sort: true, fixed: true},
                  {field:'itemName', title: '事项名称'},
                  {field:'itemFounder', title: '立项人', templet:'<div>{{d.itemFounder.userName}}</div>'},
                  {field:'itemTime', title: '立项时间',sort: true},
                  {field:'itemContent', title: '内容'}
              ]]
              ,id: 'testReload'
              ,page: true
              ,height: 315
          });
          var $ = layui.$, active = {
              reload: function(){
                 // var demoReload = $('#demoReload');
                  var sx_status=$("#sx_status option:selected").val();
                  var sx_urgeny=$("#sx_urgenry option:selected").val();
                  var founder =$("#founder option:selected").val();
               //   alert(sx_status);
               //   alert(sx_urgeny);
               //   alert(founder);
                  //执行重载
                  table.reload('testReload', {
                      page: {
                          curr: 1 //重新从第 1 页开始
                      },
                      method:"post",
                      where: {
                          checkStatusId :sx_status,
                          urgenryId :sx_urgeny,
                          userId :founder
                      }
                  });
              }
          };

          $('.demoTable .layui-btn').on('click', function(){
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
          });
      });

      var $;
      var element;
      var form;
      layui.use(['layer','element','jquery','laydate','form'],function () {
          form =layui.form;
          layer = layui.layer;
          $ = layui.jquery;
          element = layui.element;
          laydate = layui.laydate;
          findFounder();
          findUrgenry();
          findStatus();
      })

      function findFounder() {
          $.ajax({
              url:"sx/findFounder",
              type:"post",
              datatype:"json",
              success:function(data){
                 var  founder = document.getElementById("founder");
                 for (var i =0;i<data.length;i++){
                   //  alert(data[2].user.user_id);
                     var option = document.createElement("option");
                     option.setAttribute("value",data[i].userId);
                     option.innerText = data[i].userName;
                     founder.appendChild(option);
                     layui.form.render('select');
                 }
              }
          })
      }

      function findUrgenry() {
         $.ajax({
             url:"sx/findUrgenry",
             type:"post",
             datatype:"json",
             success:function (data) {
                 var sx_urgenry = document.getElementById("sx_urgenry");
                 for (var i = 0;i<data.length;i++){
                     var option =document.createElement("option");
                     option.setAttribute("value",data[i].urgenryId);
                     option.innerText=data[i].urgenryName;
                     sx_urgenry.appendChild(option);
                     layui.form.render('select');
                 }
             }
         })
      }

      function findStatus() {
          $.ajax({
              url:"sx/findStatue",
              type:"post",
              datatype:"json",
              success:function (data) {
                  var sx_status = document.getElementById("sx_status");
                  for (var i =0;i<data.length;i++){
                      var option =document.createElement("option");
                      option.setAttribute("value",data[i].checkStatusId);
                      option.innerText = data[i].statusName;
                      sx_status.appendChild(option);
                      layui.form.render('select');
                  }
              }
          })
      }
  </script>
  </body>
</html>